<template>
	<view class="nearbysetShop">
		<view class="search">
			<searchCom @searchClick="searchFun"></searchCom>
		</view>
		<scroll-view class="list" scroll-y="true" @scrolltolower="getShoplist()">
			<view class="list_eve" @click="navDetail(item)" v-for="(item,index) in shopArr" :key="index">
				<view class="list_title">{{item.shop_name}}</view>
				<view class="list_text">
					<view class=""><text>商户UID:</text><input type="text" :value="item.uid" disabled="true" /></view>
					<view class="">门店ID:{{item.id}}</view>
				</view>
				<image src="../../static/img/my_back.png"></image>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { shoplist } from '../../api/index.js'
	import searchCom from '../../components/search/searchCom.vue'
	export default {
		data() {
			return {
				isLoad:false,
				isAll:false,
				page:1,
				limit:20,
				shopArr:[],
				searchVal:''
			}
		},
		onLoad:function(){
			this.getShoplist(true)
		},
		methods: {
			searchFun:function(data){
				console.log(data)
				this.searchVal = data.searchComval;
				this.isLoad = false;
				this.isAll = false;
				this.page = 1;
				this.getShoplist(true)
			},
			getShoplist:function(isSw){
				let that = this;
				if(that.isLoad || that.isAll){ //假如之前的请求未完成或者列表数据已经全部加载完毕，则返回空
					console.log("请求未完成或者列表数据已经全部加载完毕")
					return ;
				}
				that.isLoad = true;
				let obj = {
					status:0,//0:全部
					search: that.searchVal,
					page: that.page,
					pagesize: that.limit
				}
				shoplist(obj).then((res) => {
					console.log(res)
					if(res.code==0){
						if(isSw === true){//判断是否重新加载数据
							that.shopArr = that.dealList(res.data.list);
						}else{
							that.shopArr = that.shopArr.concat(that.dealList(res.data.list));
						}
						
						that.page += 1;
						that.isLoad = false;
						if(res.data.list.length < that.limit){
							that.isAll = true;
						}
					}else{
						that.isLoad = false;
						that.isAll = false;
					}
				}).catch((e) => {
					console.log(e);
				})
			},
			dealList:function(data){
				return data.map((item,index,arr)=>{
					return {
						uid:item.uid,//商户uid
						shop_name:item.shop_name,
						id:item.id,//门店id
					}
				});
			},
			navDetail:function(item){
				uni.navigateTo({
					url:'../nearbysetPrint/nearbysetPrint?uid='+item.uid+'&suid='+item.id
				})
			}
		},
		components:{
			searchCom
		}
	}
</script>

<style lang="scss" scoped>
	input{
		font-size: $uni-font-size-base !important;
	}
	.nearbysetShop{
		height: 100%;
		position: relative;
		font-size: $uni-font-size-base;
		.search{
			position: absolute;
			top: 0;left: 0;right: 0;
			width: 100%;
		}
		.list{
			height: 100%;
			padding-top: 80rpx;
			box-sizing: border-box;
			background-color: #F5F5F5;
			.list_eve{
				position: relative;
				padding: 30rpx;
				border-bottom: 1rpx solid #E5E5E5;
				background-color: #FFFFFF;
				.list_title{
					color: #333333;
					font-weight: bold;
				}
				.list_text{
					font-size: $uni-font-size-sm;
					color: #999999;
					display: flex;
					margin-top: 10rpx;
					view{
						margin-right: 20rpx;
						input{
							display: inline-block;
							font-size: $uni-font-size-sm;
							width: 100rpx;
							vertical-align: bottom;
						}
					}
				}
				image{
					position: absolute;
					width: 34rpx;
					height: 34rpx;
					right: 30rpx;
					top: 60rpx;
				}
			}
		}
	}
</style>
